<template>
    <div class="wh-100" style="background-color: #fff" v-loading="loading">
        <!--title&添加场地-->
        <div class="d-flex-between-center px-12 " style="height: 60px; border-bottom: 1px solid #eef1f7">
            <div class="fs-16 fw-7">场地管理</div>
            <Button type="primary" @click="addSite">+添加场地</Button>
        </div>
        <!--搜索&导出-->
        <div class="d-flex-between-center px-12" style="height: 60px; border-bottom: 1px solid #eef1f7">
            <div class="d-flex">
                <Button @click="exportData">导出数据</Button>
                <Button type="dashed" @click="changeTip">{{ openTip ? '关闭提示' : '开启提示' }}</Button>
            </div>
            <div class="d-flex align-items-center">
                <Input @keydown.native.enter.prevent="getSearch" @on-keyup="pages.venueName=pages.venueName.replace(/\s/g,'')" v-model="pages.venueName" size="small" class="d-flex-center" placeholder="按场地名称查找"></Input>
                <Button type="primary" size="small" style="width: 80px; border-radius: 0 3px 3px 0" class="ml-0 vertical-align-bottom" @click="getSearch">搜索</Button>
            </div>
        </div>
        <!--表格-->
        <div v-ref-height="abca" style="height: calc(100% - 190px)">
            <Alert v-show="openTip" show-icon>
                已选择
                <span >{{ selectList.length }}</span>
                项
                <a @click="toggleSelection">清空</a>
            </Alert>
            <Table :height="abca.value  - heightNmber"  ref="selection"  @on-selection-change="onSelectionChange" :columns="tableColumns" :data="tableData">
                <template slot-scope="{ row }" slot="currentState">
                    <!--                <span v-if="row.venueStatus === 0" style="color: green">空闲</span>-->
                    <!--                <span v-if="row.venueStatus === 1" style="color: goldenrod">使用中</span>-->
                    <span v-if="row.isUse == 'true'" style="color: goldenrod">使用中</span>
                    <span v-if="row.isUse == 'false'" style="color: green">空闲</span>
                </template>
                <template slot-scope="{ row }" slot="operate">
                    <span class="table-btn mr-12" @click="openUpdateDialog(row)">修改</span>
                    <span class="table-btn" @click="deleteData(row.id)">删除</span>
                </template>
            </Table>
            <div class="w-100 fs-14 d-flex-center" style="height: 70px; background-color: #fff">
                <Page
                    show-total
                    :total="pages.total"
                    :page-size="pages.pageSize"
                    :current="pages.pageNumber"
                    show-elevator
                    show-sizer
                    @on-change="changePage"
                    @on-page-size-change="changePageSize"
                    class-name="d-flex-center"
                    size="small"
                />
            </div>
        </div>
        <!--修改弹框-->
        <el-dialog title="修改场地信息" :visible.sync="dialogFormVisible">
            <Form ref="siteFormRef" :model="siteForm" :rules="siteFormRules" :label-width="90" style="width: 500px">
                <FormItem label="场地名称" prop="venueName">
                    <Input v-model="siteForm.venueName" placeholder="输入场地名称"></Input>
                </FormItem>
                <FormItem label="场地用途" prop="venueUse">
                    <RadioGroup v-model="siteForm.venueUse">
                        <Radio label="双选会"></Radio>
                        <Radio label="宣讲会"></Radio>
                        <Radio label="咨询室"></Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="是否启用" prop="isUse">
                    <i-switch v-model="siteForm.isUse" />
                </FormItem>
                <FormItem label="场地位置" prop="venueAddress">
                    <Input v-model="siteForm.venueAddress" placeholder="请填写场地详细位置"></Input>
                </FormItem>
                <FormItem label="坐席数量" prop="venueCapacity" :rules="[{ required: true, trigger: 'blur', validator: validatevenueCapacity }]">
                    <Input v-model="siteForm.venueCapacity" placeholder="填写场地用人单位坐席数量"></Input>
                </FormItem>
                <FormItem label="学生容量" prop="studentNumber">
                    <Input v-model="siteForm.studentNumber" type="number" placeholder="填写可容纳的学生数量"></Input>
                </FormItem>
            </Form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateData">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { deletePlaceAPI, getSiteManagementAPI, updatePlaceAPI } from '../../../api/bys/siteAdministration/index';
import { shVenueExportAPI } from '@/api/Main/viewDetailsAboutADoubleMeetingApis';
// region TODO 表格
const tableColumns = [
    {
        type: 'selection',
        width: 60,
        key: 'name'
    },
    {
        title: '场地名称',
        key: 'venueName'
    },
    {
        title: '场地位置',
        key: 'venueAddress'
    },
    {
        title: '单位坐席',
        key: 'venueCapacity'
    },
    {
        title: '用途',
        key: 'venueUse'
    },
    {
        title: '当前状态',
        slot: 'currentState'
    },
    {
        title: '更新时间',
        key: 'updateTime'
    },
    {
        title: '操作',
        slot: 'operate'
    }
];
const tableData = [];
// endregion
// region TODO 表单
const siteForm = {
    isUse: false, //是否启用
    studentNumber: '', //学生容量
    venueAddress: '', //场地位置
    venueCapacity: '', //坐席数量
    venueName: '', //场地名称
    venueUse: '' //场地用途
};
const siteFormRules = {
    venueUse: [{ required: true, message: '必填项', trigger: 'blur' }],
    venueName: [{ required: true, message: '必填项', trigger: 'blur' }],
    venueAddress: [{ required: true, message: '必填项', trigger: 'blur' }],
    enableOrNot: [{ required: true, message: '必填项', trigger: 'change' }]
};
// endregion
const validatevenueCapacity = (rule, value, callback) => {
    if (siteForm.venueCapacity) {
        if (siteForm.venueCapacity === null || siteForm.venueCapacity === '') {
            callback(new Error('请输入坐席数量'));
        } else {
            callback();
        }
    } else {
        callback();
    }
};

export default {
    data() {
        return {
            dialogFormVisible: false,
            loading: false,
            tableColumns,
            tableData,
            siteForm,
            siteFormRules,
            validatevenueCapacity,
            abca: {
                value: 0
            },
            pages: {
                pageSize: 10,
                pageNumber: 1,
                total: 0,
                venueName: ''
            },
            heightNmber:20,
            openTip:true,
            selectList:[],
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        // region TODO 选择数据变化
        onSelectionChange(value) {
            this.selectList=value
        },
        // endregion
        changeTip(){
            this.openTip = !this.openTip
            if(this.openTip){
                this.heightNmber=20
            }else{
                this.heightNmber=0
            }
        },
        toggleSelection() {
            this.$refs.selection.selectAll(false);
        },
        download() {
            shVenueExportAPI().then(res => {
                this.importing1 = false;
                // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
                const blob = new Blob([res], { type: 'charset=utf-8' });
                let url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', '场地信息.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); // 删除节点
                window.URL.revokeObjectURL(url); //释放该 url
            });
        },

        getList() {
            this.loading = true;
            getSiteManagementAPI(this.pages).then(res => {
                console.log(res);
                this.tableData = res?.result?.records || [];
                this.loading = false;
            });
        },
        getSearch() {
            this.getList();
        },
        addSite() {
            this.$router.push({
                name: 'AddSite'
            });
        },
        // region TODO 打开修改弹窗
        openUpdateDialog(row) {
            console.log(row, 'row');
            this.siteForm = JSON.parse(JSON.stringify(row));
            this.siteForm.isUse = JSON.parse(this.siteForm.isUse);
            console.log(this.siteForm, '修改');
            this.dialogFormVisible = true;
        },
        // endregion

        // region TODO 删除一条数据
        deleteData(id) {
            this.$confirm('您确定删除该场地信息吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    deletePlaceAPI({
                        id: id
                    }).then(res => {
                        if (res.success) {
                            this.$message.success(res.message);
                            this.getList();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        // endregion
        // region TODO 修改一条数据
        updateData() {
            this.$refs.siteFormRef.validate(valid => {
                if (valid) {
                    this.$confirm('你确定修改该信息吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(() => {
                            updatePlaceAPI(this.siteForm).then(res => {
                                if (res.success) {
                                    this.$message.success(res.message);
                                    this.dialogFormVisible = false;
                                    this.getList();
                                    this.siteForm = '';
                                } else {
                                    this.$message.error(res.message);
                                }
                            });
                        })
                        .catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消修改'
                            });
                            this.siteForm = '';
                        });
                } else {
                    this.$message.error('请完善相关信息！');
                    return false;
                }
            });
        },
        // endregion
        // region TODO 分页
        changePage(val) {
            this.pages.pageNumber = val;
            //调接口
            this.getList();
        },
        changePageSize(val) {
            this.pages.pageSize = val;
            //调接口
            this.getList();
        }
        // endregion
    }
};
</script>

<style scoped>
.table-btn {
    color: #1677ff;
    cursor: pointer;
}
</style>
